<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta name="renderer" content="webkit">
	<title>我的购物车-云购物商城</title>
	<link rel="shortcut icon" type="image/x-icon" href="img/icon/favicon.ico">
	<link rel="stylesheet" type="text/css" href="${path}/static/front/css/base1.css">
	<link rel="stylesheet" type="text/css" href="${path}/static/front/css/home1.css">
	<script type="text/javascript" src="${path}/static/front/js/jquery.js"></script>
	<script type="text/javascript" src="${path}/static/front/js/index.js"></script>
	<script type="text/javascript" src="${path}/static/front/js/modernizr-custom-v3.1.1.min.js"></script>

</head>
<body>

<header id="pc-header">
	<div class="pc-header-nav">
		<div class="pc-header-con">
			<div class="fr pc-header-list top-nav">
				<ul>
	            <c:if test="${empty user }">
	                <li><a href="#" onclick="login()">登录</a> </li>
	                <li class="headerul">|</li>
	                <li><a href="#">注册</a> </li>
	                <li class="headerul">|</li>
	             </c:if>
	              <c:if test="${not empty user }">
	                <li><a href="#">欢迎：${user.username }</a> </li>
	                <li class="headerul">|</li>
	                <li><a href="#">用户中心</a> </li>
	                <li class="headerul">|</li>
	                <li><a href="${path}/cart/getCartListJsp.shtml?userId=${user.id}">我的购物车</a> </li>
	                <li class="headerul">|</li>
	                <li><a href="${path}/order/getOrderListJsp.shtml">我的订单</a> </li>
	              </c:if> 
				</ul>
			</div>
		</div>
	</div>
	<div class="pc-header-logo clearfix">
		<div class="pc-fl-logo fl">
			<h1>
				<a href="${path}/index.shtml"></a>
			</h1>
		</div>
		<div class="head-form fl">
			<form class="clearfix">
				<input class="search-text" accesskey="" id="key" autocomplete="off" placeholder="洗衣机" type="text">
				<button class="button" onclick="search('key');return false;">搜索</button>
			</form>
			<div class="words-text clearfix">
				<a href="#" class="red">1元秒爆</a>
				<a href="#">低至五折</a>
				<a href="#">农用物资</a>
				<a href="#">佳能相机</a>
				<a href="#">服装城</a>
				<a href="#">买4免1</a>
				<a href="#">家电秒杀</a>
				<a href="#">农耕机械</a>
				<a href="#">手机新品季</a>
			</div>
		</div>
		<div class="fr pc-head-car">
			<i class="icon-car"></i>
			<a href="${path}/cart/getCartListJsp.shtml?userId=${user.id}">我的购物车</a>
		</div>
	</div>
	<!--  顶部    start-->
	<div class="yHeader">
		<!-- 导航   start  -->
		<div class="yNavIndex">
			<ul class="yMenuIndex" style="margin-left:0">
				<li style="background:#d1201e"><a href="" target="_blank">云购首页</a></li>
				<li><a href="" target="_blank">女士护肤 </a></li>
				<li><a href="" target="_blank">男士护肤</a></li>
				<li><a href="" target="_blank">洗护染发</a></li>
				<li><a href="" target="_blank">染发</a></li>
				<li><a href="" target="_blank">彩妆</a></li>
				<li><a href="" target="_blank">品牌故事</a></li>
			</ul>
		</div>
		<!-- 导航   end  -->
	</div>

</header>

<section id="pc-jie">
	<div class="center ">
		<ul class="pc-shopping-title clearfix">
			<li><a href="#" class="cu">全部商品(10)</a></li>
		</ul>
	</div>
	<div class="pc-shopping-cart center">
		<div class="pc-shopping-tab">
			<table>
				<thead>
					<tr class="tab-0">
						<th class="tab-1"><input type="checkbox" name="s_all" class="s_all tr_checkmr" id="s_all_h"><label for=""> 全选</label></th>
						<th class="tab-2">商品</th>
						<th class="tab-3">商品信息</th>
						<th class="tab-4">单价</th>
						<th class="tab-5">数量</th>
						<th class="tab-6">小计</th>
						<th class="tab-7">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td colspan="7" style="padding-left:0px; background:#eee">
							<a href="#" style="position:relative;padding-left:50px"><i class="icon-kefu"></i>联系客服</a>
							<ul class="clearfix fr" style="padding-right:20px">
								<li><i class="pc-shop-car-yun"></i>满109元减10</li>
								<li><i class="pc-shop-car-yun"></i>领取3种优惠券, 最高省30元</li>
							</ul>
						</td>
					</tr>
					
					<c:forEach items="${cartList}" var="cart">
					<div name="cartItem${cart.id}">
						<tr >
							<c:if test="${cart.checked==1 }">
								<th><input type="checkbox"  id="checkbox${cart.id}" onclick="updateCartItemCheckStatusByCartId(${cart.id})" style="margin-left:10px; float:left" checked="true"></th>
							</c:if>
							<c:if test="${cart.checked==0 }">
								<th><input type="checkbox" id="checkbox${cart.id}" onclick="updateCartItemCheckStatusByCartId(${cart.id})" style="margin-left:10px; float:left"></th>
							</c:if>
							<th class="tab-th-1">
								<a href="#"><img src="/pic/${cart.product.mainImage }" width="102px" height="102px" alt=""></a>
								<a href="#" class="tab-title">${cart.product.name } </a>
							</th>
							<th>
								<p>状态：在售</p>
								<p>库存：${cart.product.stock}</p>
							</th>
							<th>
								<p>原价：<del>${cart.product.price+100}</del> </p>
								<p class="red">活动价：${cart.product.price} </p>
							</th>
							<th class="tab-th-2">
								<a href="#" onclick="updateCartItemQuantityByCartId(${cart.id} ,-1 ,${cart.product.price})">-</a>
								<input id="quantity${cart.id}" type="text" value="${cart.quantity}" maxlength="3" placeholder="" class="shul">
								<a href="#" onclick="updateCartItemQuantityByCartId(${cart.id} ,1 ,${cart.product.price})">+</a>
							</th>
							<th class="red" id="cartItemTotalPrice${cart.id}">${cart.product.price * cart.quantity} </th>
							<th><a href="#" onclick="deleteCartItemByCartId(${cart.id})">删除</a></th>
						</tr>
					</div>
					</c:forEach>
					
				</tbody>
			</table>

		</div>
	</div>
	<div style="height:10px"></div>
	<div class="center">
		<div class="clearfix pc-shop-go">
			<div class="fl pc-shop-fl">
				<input type="checkbox" placeholder="">
				<label for="">全选</label>
				<a href="#">删除</a>
				<a href="#">清楚失效商品</a>
			</div>
			<div class="fr pc-shop-fr">
				<p>共有 <em class="red pc-shop-shu">2</em> 款商品，总计（不含运费）</p>
				<span>¥ 699.00</span>
				<a href="${path}/order/getOrderConfirmJsp.shtml">去付款</a>
			</div>
		</div>
	</div>
</section>



<div style="height:100px"></div>

<footer>
	<div class="pc-footer-top">
		<div class="center">
			<ul class="clearfix">
				<li>
					<span>关于我们</span>
					<a href="#">关于我们</a>
					<a href="#">诚聘英才</a>
					<a href="#">用户服务协议</a>
					<a href="#">网站服务条款</a>
					<a href="#">联系我们</a>
				</li>
				<li class="lw">
					<span>购物指南</span>
					<a href="#">新手上路</a>
					<a href="#">订单查询</a>
					<a href="#">会员介绍</a>
					<a href="#">网站服务条款</a>
					<a href="#">帮助中心</a>
				</li>
				<li class="lw">
					<span>消费者保障</span>
					<a href="#">人工验货</a>
					<a href="#">退货退款政策</a>
					<a href="#">运费补贴卡</a>
					<a href="#">无忧售后</a>
					<a href="#">先行赔付</a>
				</li>
				<li class="lw">
					<span>商务合作</span>
					<a href="#">人工验货</a>
					<a href="#">退货退款政策</a>
					<a href="#">运费补贴卡</a>
					<a href="#">无忧售后</a>
					<a href="#">先行赔付</a>
				</li>
				<li class="lss">
					<span>下载手机版</span>
					<div class="clearfix lss-pa">
						<div class="fl lss-img"><img src="${path}/static/front/img/icon/code.png" alt=""></div>
						<div class="fl" style="padding-left:20px">
							<h4>扫描下载云购APP</h4>
							<p>把优惠握在手心</p>
							<P>把潮流带在身边</P>
							<P></P>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="pc-footer-lin">
			<div class="center">
				<p>友情链接：
					卡宝宝信用卡
					梦芭莎网上购物
					手游交易平台
					法律咨询
					深圳地图
					P2P网贷导航
					名鞋库
					万表网
					叮当音乐网
					114票务网
					儿歌视频大全
				</p>
				<p>
					京ICP证1900075号  京ICP备20051110号-5  京公网安备110104734773474323  统一社会信用代码 91113443434371298269B  食品流通许可证SP1101435445645645640352397
				</p>
				<p style="padding-bottom:30px">版物经营许可证 新出发京零字第朝160018号  Copyright©2011-2015 版权所有 ZHE800.COM </p>
			</div>
		</div>
	</div>
</footer>

<script src="${path}/static/common/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="${path}/static/common/layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="${path}/static/common/mylayer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

	$(function() {
		refreshTotalPrice();
	});
	
	/* 2020.03.31    刷新总价 */
	function refreshTotalPrice() {
		// 当页面加载完了，计算选中商品的总价格
		//$("input[type=checkbox]:checked");
		var checkboxs = $("input[name=selectCheckbox]:checked");
		var totalPrice = 0;
		$(checkboxs).each(function() {
			// this代表当前正在遍历的checkbox的js dom对象
			// checkbox的id="checkbox123"
			// this.id     checkbox123
			// substr   123
			var checkboxId = this.id;
			var cartId = checkboxId.substr("checkbox".length);
			var cartItemTotalPrice = $("#cartItemTotalPrice" + cartId).html();
			totalPrice += parseFloat(cartItemTotalPrice);
		});
		$("#totalPrice").html(totalPrice);
	}

/* 删除 */
	/* 2020.03.30 删除 购物车的商品（deleteCartItemByCartId）  */
	function deleteCartItemByCartId(cartId) {
		layer.confirm("确定删除吗？", function() {
			$.post(
				"${path}/cart/deleteCartItemByCartId.shtml",		
				{"cartId":cartId},
				function(result) {
					if (result.success) { 
						// 如果 删除成功
							//1.mylayer弹窗 提示删除成功
							//2.jQuery .remove()： 移除 (购物车jsp页面里)  那一条记录，，by id="cartItem${cart.id}" item:每一条商品(cart购物车里)
							//3.刷新
						mylayer.successMsg(result.msg);
						$("#cartItem" + cartId).remove();
						refreshTotalPrice();
					} else {
						mylayer.errorMsg(result.msg);
					}//else
				},//function(result)
				"json"
			);//post
		});//layer.confirm
	}//function deleteByCartId
	
	/* 4. 2020.03.30  修改 购物车内 商品的数量（update cart表的quantity字段）    */
 	function updateCartItemQuantityByCartId(cartId ,addOrSub ,productPrice) {
		$.post(
			"${path}/cart/updateCartItemQuantityByCartId.shtml",
			{"cartId":cartId,"addOrSub":addOrSub},
			function(result) {
				if (result.success) {
					// 更新成功
						//1.提示 更新成功
						//2.更新 quantity值
						//3. 更新 小计  每个商品的总价格
					/* 1.提示  修改成功 */
					mylayer.successMsg(result.msg);
					
					
					/* 2.更新 quantity值 */
					var quantity = parseInt($("#quantity" + cartId).val());
					quantity = quantity + addOrSub;
					$("#quantity" + cartId).val(quantity);
					
					/* 3.更新 小计（当前item的）：商品数量*商品价格的值 */
					var totalPrice = quantity * productPrice;
					$("#cartItemTotalPrice" + cartId).html(totalPrice + "元");
					
					/* 4.刷新 */
					
					
				} else {
					mylayer.errorMsg(result.msg);
				}
			},
			"json"
		)
	} 
	
	/* 2020.03.31 更新多选框         0未选中 ，1选中 */
	function updateCartItemCheckStatusByCartId(cartId) {
		// prop:property
		
		/* 
			0.复选框 被点击后 进入点击事件
			1.获取 复选框当前状态， true选中，false未选中。然后 赋值给1个变量checked。
			2.if(true checked=1)(false checked=0)
			3.发ajax到后台，，更新chencked, 根据cartId
		*/
		var checked = $("#checkbox" + cartId).prop("checked");// true false // prop: 获取checkbox的true,false
		if(checked) {
			checked = 1;
		} else {
			checked = 0;
		}
		
		$.post(
			"${path}/cart/updateCartItemCheckStatusByCartId.shtml",
			{"cartId":cartId,"checked":checked},
			function(result) {
				if(result.success) {
					mylayer.successMsg(result.msg);
					refreshTotalPrice();
				} else {
					mylayer.errorMsg(result.msg);
				}
			},
			"json"
		);
	}

	


/* 自带的不用管 */
    //hover 触发两个事件，鼠标移上去和移走
    //mousehover 只触发移上去事件
    $(".top-nav ul li").hover(function(){
        $(this).addClass("hover").siblings().removeClass("hover");
        $(this).find("li .nav a").addClass("hover");
        $(this).find(".con").show();
    },function(){
        //$(this).css("background-color","#f5f5f5");
        $(this).find(".con").hide();
        //$(this).find(".nav a").removeClass("hover");
        $(this).removeClass("hover");
        $(this).find(".nav a").removeClass("hover");
    })
</script>
</body>
</html>